/**
 * @class button - table cell properties
 *
 * @param  elRTE  rte   объект-редактор
 * @param  String name  название кнопки
 *
 *
 * @author:    Dmitry Levashov (dio) dio@std42.ru
 * @copyright: Studio 42, http://www.std42.ru
 **/
(function ($) {
    elRTE.prototype.ui.prototype.buttons.tbcellprops = function (rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);
        var self = this;
        this.src = null;
        this.labels = null;

        function init() {
            self.labels = {
                main:'Properies',
                adv:'Advanced',
                events:'Events',
                id:'ID',
                'class':'Css class',
                style:'Css style',
                dir:'Script direction',
                lang:'Language'
            }

            self.src = {
                main:{
                    type:$('<select />').css('width', '100%')
                        .append($('<option />').val('td').text(self.rte.i18n('Data')))
                        .append($('<option />').val('th').text(self.rte.i18n('Header'))),
                    width:$('<input type="text" />').attr('size', 4),
                    wunit:$('<select />')
                        .append($('<option />').val('%').text('%'))
                        .append($('<option />').val('px').text('px')),
                    height:$('<input type="text" />').attr('size', 4),
                    hunit:$('<select />')
                        .append($('<option />').val('%').text('%'))
                        .append($('<option />').val('px').text('px')),
                    align:$('<select />').css('width', '100%')
                        .append($('<option />').val('').text(self.rte.i18n('Not set')))
                        .append($('<option />').val('left').text(self.rte.i18n('Left')))
                        .append($('<option />').val('center').text(self.rte.i18n('Center')))
                        .append($('<option />').val('right').text(self.rte.i18n('Right')))
                        .append($('<option />').val('justify').text(self.rte.i18n('Justify'))),
                    border:$('<div />'),
                    padding:$('<div />'),
                    bg:$('<div />'),
                    bgimg:$('<input type="text" />').css('width', '90%'),
                    apply:$('<select />').css('width', '100%')
                        .append($('<option />').val('').text(self.rte.i18n('Current cell')))
                        .append($('<option />').val('row').text(self.rte.i18n('All cells in row')))
                        .append($('<option />').val('column').text(self.rte.i18n('All cells in column')))
                        .append($('<option />').val('table').text(self.rte.i18n('All cells in table')))
                },

                adv:{
                    id:$('<input type="text" />'),
                    'class':$('<input type="text" />'),
                    style:$('<input type="text" />'),
                    dir:$('<select />').css('width', '100%')
                        .append($('<option />').text(self.rte.i18n('Not set')).val(''))
                        .append($('<option />').text(self.rte.i18n('Left to right')).val('ltr'))
                        .append($('<option />').text(self.rte.i18n('Right to left')).val('rtl')),
                    lang:$('<input type="text" />')
                },

                events:{}
            }

            $.each(self.src, function () {
                for (var n in this) {
                    this[n].attr('name', n);
                    if (this[n].attr('type') == 'text' && !this[n].attr('size') && n != 'bgimg') {
                        this[n].css('width', '100%')
                    }
                }
            });

            $.each(
                ['onblur', 'onfocus', 'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmouseout', 'onmouseleave', 'onkeydown', 'onkeypress', 'onkeyup'],
                function () {
                    self.src.events[this] = $('<input type="text" />').css('width', '100%');
                });

        }

        this.command = function () {
            !this.src && init();
            this.cell = this.rte.dom.selfOrParent(this.rte.selection.getNode(), /^(TD|TH)$/);
            if (!this.cell) {
                return;
            }
            this.src.main.type.val(this.cell.nodeName.toLowerCase());
            this.cell = $(this.cell);
            this.src.main.border.elBorderSelect({styleHeight:117, value:this.cell});
            this.src.main.bg.elColorPicker({palettePosition:'outer', 'class':'el-colorpicker ui-icon ui-icon-pencil'});
            this.src.main.padding.elPaddingInput({ value:this.cell});

            var w = this.cell.css('width') || this.cell.attr('width');
            this.src.main.width.val(parseInt(w) || '');
            this.src.main.wunit.val(w.indexOf('px') != -1 ? 'px' : '%');

            var h = this.cell.css('height') || this.cell.attr('height');
            this.src.main.height.val(parseInt(h) || '');
            this.src.main.hunit.val(h.indexOf('px') != -1 ? 'px' : '%');

            this.src.main.align.val(this.cell.attr('align') || this.cell.css('text-align'));
            this.src.main.bg.val(this.cell.css('background-color'));
            var bgimg = this.cell.css('background-image');
            this.src.main.bgimg.val(bgimg && bgimg != 'none' ? bgimg.replace(/url\(([^\)]+)\)/i, "$1") : '');
            this.src.main.apply.val('');

            var opts = {
                rtl:this.rte.rtl,
                submit:function (e, d) {
                    e.stopPropagation();
                    e.preventDefault();
                    self.set();
                    d.close();
                },
                dialog:{
                    width:520,
                    title:this.rte.i18n('Table cell properties')
                }
            }
            var d = new elDialogForm(opts);
            for (var tab in this.src) {
                d.tab(tab, this.rte.i18n(this.labels[tab]));

                if (tab == 'main') {
                    d.append([this.rte.i18n('Width'), $('<span />').append(this.src.main.width).append(this.src.main.wunit)], 'main', true)
                        .append([this.rte.i18n('Height'), $('<span />').append(this.src.main.height).append(this.src.main.hunit)], 'main', true)
                        .append([this.rte.i18n('Table cell type'), this.src.main.type], 'main', true)
                        .append([this.rte.i18n('Border'), this.src.main.border], 'main', true)
                        .append([this.rte.i18n('Alignment'), this.src.main.align], 'main', true)
                        .append([this.rte.i18n('Paddings'), this.src.main.padding], 'main', true)
                        .append([this.rte.i18n('Background'), $('<span />').append($('<span />').css({'float':'left', 'margin-right':'3px'}).append(this.src.main.bg)).append(this.src.main.bgimg)], 'main', true)
                        .append([this.rte.i18n('Apply to'), this.src.main.apply], 'main', true);
                } else {
                    for (var name in this.src[tab]) {
                        var v = this.cell.attr(name) || '';
                        if (tab == 'events') {
                            v = this.rte.utils.trimEventCallback(v);
                        }
                        d.append([this.rte.i18n(this.labels[name] ? this.labels[name] : name), this.src[tab][name].val(v)], tab, true);
                    }
                }
            }
            d.open()
        }

        this.set = function () {
            // $(t).remove();
            var target = this.cell,
                apply = this.src.main.apply.val();
            switch (this.src.main.apply.val()) {
                case 'row':
                    target = this.cell.parent('tr').children('td,th');
                    break;

                case 'column':
                    target = $(this.rte.dom.tableColumn(this.cell.get(0)));
                    break;

                case 'table':
                    target = this.cell.parents('table').find('td,th');
                    break;
            }

            for (var tab in this.src) {
                if (tab != 'main') {
                    for (var n in this.src[tab]) {
                        var v = $.trim(this.src[tab][n].val());
                        if (v) {
                            target.attr(n, v);
                        } else {
                            target.removeAttr(n);
                        }
                    }
                }
            }

            target.removeAttr('width')
                .removeAttr('height')
                .removeAttr('border')
                .removeAttr('align')
                .removeAttr('bordercolor')
                .removeAttr('bgcolor');

            var t = this.src.main.type.val();
            var w = parseInt(this.src.main.width.val()) || '';
            var h = parseInt(this.src.main.height.val()) || '';
            var i = $.trim(this.src.main.bgimg.val());
            var b = this.src.main.border.val();
            var css = {
                'width':w ? w + this.src.main.wunit.val() : '',
                'height':h ? h + this.src.main.hunit.val() : '',
                'background-color':this.src.main.bg.val(),
                'background-image':i ? 'url(' + i + ')' : '',
                'border':$.trim(b.width + ' ' + b.style + ' ' + b.color),
                'text-align':this.src.main.align.val() || ''
            };
            var p = this.src.main.padding.val();
            if (p.css) {
                css.padding = p.css;
            } else {
                css['padding-top'] = p.top;
                css['padding-right'] = p.right;
                css['padding-bottom'] = p.bottom;
                css['padding-left'] = p.left;
            }

            target = target.get();

            $.each(target, function () {
                var type = this.nodeName.toLowerCase();
                var $this = $(this);
                if (type != t) {

                    var attr = {}
                    for (var i in self.src.adv) {
                        var v = $this.attr(i)
                        if (v) {
                            attr[i] = v.toString();
                        }
                    }
                    for (var i in self.src.events) {
                        var v = $this.attr(i)
                        if (v) {
                            attr[i] = v.toString();
                        }
                    }
                    var colspan = $this.attr('colspan') || 1;
                    var rowspan = $this.attr('rowspan') || 1;
                    if (colspan > 1) {
                        attr.colspan = colspan;
                    }
                    if (rowspan > 1) {
                        attr.rowspan = rowspan;
                    }

                    $this.replaceWith($('<' + t + ' />').html($this.html()).attr(attr).css(css));

                } else {
                    $this.css(css);
                }
            });

            this.rte.ui.update();
        }

        this.update = function () {
            if (this.rte.dom.parent(this.rte.selection.getNode(), /^TABLE$/)) {
                this.domElem.removeClass('disabled');
            } else {
                this.domElem.addClass('disabled');
            }
        }

    }

})(jQuery);